<template>
	<view class="content">
		
	
	<!-- adpid="1111111111" 此广告位标识仅在HBuilderX标准基座中有效，仅用于测试 -->
	    <!-- 广告后台申请的广告位(adpid)需要自定义基座/云打包/本地打包后生效 -->
	    <view class="ad-view">
	      <ad adpid="1205299966" ad-intervals="31" @load="onloadAd" @close="oncloseAd" @error="onerrorAd"></ad>
	    </view>
		
		<swiper  :class="swiperClass" @change="change" :current="swiperDotIndex">
			<swiper-item v-for="(item, index) in newsList" :key="index" @click="clickItem(item)" >
				<view class="swiper-item" :class="'swiper-item' + index">
					<image style="width: 100%;" :src="item.image"></image>
					<text style="color: #fff; font-size: 24px;">{{item.title}}</text>
				</view>
			</swiper-item>
		</swiper>
		

	<!-- 	<uni-section title="日常工具" type="line" padding>
			<uni-grid :column="3" :square="false" :highlight="false" >
				<uni-grid-item v-for="(item, index) in list" :index="index" :key="index" @click="jumpTools(item)">
					<view class="grid-item-box">
						<image :src="item.url" class="image" mode="aspectFill" />
						<text class="text">{{ item.text }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section> -->
		<uni-section title="日常工具" type="line">
					<uni-list>
						<uni-list-item title="分享" note="把自己喜欢的内容记录下来" showArrow
							:thumb="icons.share"
							thumb-size="medium" rightText=""  clickable @click="jumpTools(1)"/>
						<uni-list-item title="待办" note="需要完成的事项" showArrow
							:thumb="icons.todo"
							thumb-size="medium" rightText=""   clickable @click="jumpTools(2)"/>
						<uni-list-item title="目标" note="给自己定一个目标" showArrow
							:thumb="icons.target"
							thumb-size="medium" rightText=""  clickable  @click="jumpTools(3)"/>
					<!-- 	<uni-list-item title="提醒" note="设置一个闹钟,提醒一下自己" showArrow
							thumb="../../static/tubiao2.png"
							thumb-size="lg" rightText=""   clickable @click="jumpTools(4)"/> -->
						<uni-list-item title="表单" note="记录定制化的表单数据" showArrow
							:thumb="icons.table"
							thumb-size="medium" rightText=""  clickable  @click="jumpTools(5)"/>	
							<uni-list-item title="会员管理" note="管理会员信息" showArrow
								:thumb="icons.member"
								thumb-size="medium" rightText=""  clickable  @click="jumpTools(6)"/>	
						<!--  #ifdef  APP-PLUS -->
						<uni-list-item  title="短视频" note="休闲娱乐一下" showArrow
							:thumb="icons.video"
							thumb-size="medium" rightText=""  clickable @click="showContentAd()"/>
						<!--  #endif -->
					</uni-list>
				</uni-section>		
	<!-- <uni-fab ref="fab" :pattern="pattern" :content="testContent" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger"  /> -->
	</view>
</template>
<script>
	import store from '@/store/index.js';//需要引入store
	import constant from '@/store/constant.js'
	var today=constant.today;
	export default {
		components: {},
		computed:{
			
			newsList(){
				return store.state.home.newsList
			},
			// toolsContent(){
			// 	return store.state.common.toolsContent
			// },
		},
		data() {
			return {
				swiperClass:"swiper-box",
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				
				
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'nav',
				dotsStyles: {},
				swiperDotIndex: 0,
				loading: false,
				icons:{},
			}
		},
		onLoad() {
			//加载新闻通知数据
			store.dispatch('loadNewsData');
			
			
			var self=this;
			let todayData =uni.getStorageSync("iconsDate");
			console.log(todayData)
			if(todayData){
				if(todayData.date==today){
					let iconsString=uni.getStorageSync("icons");
					self.icons=JSON.parse(iconsString);
				}else{
					store.dispatch('loadIconsData',function(data){
						self.setIcons(today,data);
						
				});
				}
			}else{
				store.dispatch('loadIconsData',function(data){
					self.setIcons(today,data);
					
				});
				
			}
			
			
		},
		onBackPress() {
					if (this.$refs.fab.isShow) {
						this.$refs.fab.close()
						return true
					}
					return false
				},
		methods: {
			onloadAd(e){
				this.$data.swiperClass="swiper-box"
				 console.log("onload");
			},
			oncloseAd(e){
				this.$data.swiperClass="swiper-box1"
				console.log("onclose: " + e.detail);
			},
			onerrorAd(e){
				this.$data.swiperClass="swiper-box1"
				console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
			},
			setIcons(today,data){
				uni.setStorageSync('icons', JSON.stringify(data));
				var todayData={"date":today};
				uni.setStorageSync("iconsDate", todayData);
				let iconsString=uni.getStorageSync("icons");
				this.icons=JSON.parse(iconsString);
			},
			trigger(e) {
				this.toolsContent[e.index].active = !e.item.active
				store.dispatch('toolsJump',e.item.value)
			},
			change(e) {
				this.current = e.detail.current
				console.log(this.current)
				
			},
			clickItem(e){
				
				uni.navigateTo({
					url:"/pages/news/newsDetail?id="+e.id
				})
				
			},
			showContentAd(){
				this.adOptions = {
					adpid: 1385062416
				}
				plus.ad.showContentPage(this.adOptions, (res) => {
					this.loading = false;
				}, (err) => {
					this.loading = false;
					console.log(err);
				});
			},
			jumpTools(item){
				let url=""
				switch(item){
					case 1:
						url="/pages/share/shareList";
						break;
					case 2:
						url="/pages/todo/todoList";
						break;
					case 3:
						url="/pages/target/targetList";
						break;
					case 4:
						url="/pages/alert/alertList";
						break;
					case 5:
						url="/pages/template/templateList";
						break;
					case 6:
						url="/pages/member/memberList";
						break;
					
				}
				uni.navigateTo({
					url:url
				})
				console.log(item)
			}
		
		}
	}
</script>
<style lang="scss">
	.warp {
			padding: 10px;
		}
	
		.button {
			margin-bottom: 10px;
		}
	.image {
			width: 25px;
			height: 25px;
		}
	
		.text {
			font-size: 14px;
			margin-top: 5px;
		}
	
		.example-body {
			/* #ifndef APP-NVUE */
			// display: block;
			/* #endif */
		}
	
		.grid-dynamic-box {
			margin-bottom: 15px;
		}
	
		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.grid-item-box-row {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	
		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
	
		.swiper {
			height: 420px;
		}
	
		/* #ifdef H5 */
		@media screen and (min-width: 768px) and (max-width: 1425px) {
			.swiper {
				height: 630px;
			}
		}
	
		@media screen and (min-width: 1425px) {
			.swiper {
				height: 830px;
			}
		}
	
		/* #endif */
	.swiper-box {
		height: 260px;
		display: none;
	}
	.swiper-box1 {
		height: 260px;
		display: block;
	}
	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 260px;
		color: #fff;
	}

	.swiper-item0 {
		background-color: #cee1fd;
	}

	.swiper-item1 {
		background-color: #b2cef7;
	}

	.swiper-item2 {
		background-color: #cee1fd;
	}

	.image {
		width: 750rpx;
	}

	/* #ifndef APP-NVUE */
	::v-deep .image img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

	/* #endif */

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f;
	}

	.uni-bg-green {
		background-color: #09bb07;
	}

	.uni-bg-blue {
		background-color: #007aff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 20rpx;
	}

	.example-body-item {

		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		padding: 0 15rpx;
		/* #endif */
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px;
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333;
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333333;
		margin-left: 10rpx;
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px;
	}
	.content {
	    background-color: #DBDBDB;
	    padding: 10px;
	  }
	
	  .ad-view {
	    background-color: #FFFFFF;
	    margin-bottom: 10px;
	  }
</style>